import React from 'react';
import styles from './footBtn.css'

import no_collectionIcon from '../../../../../../icons/partTimeDetail/no-collection-icon.png';
import collectionIcon from '../../../../../../icons/partTimeDetail/collection-icon.png';
import consultationIcon from '../../../../../../icons/partTimeDetail/consultation-icon.png';
import signUpIcon from '../../../../../../icons/partTimeDetail/sign-up-icon.png';

const footBtn = ({
  list,
  onCollection=()=>{},
  onConsultation=()=>{},
  onSignUp=()=>{},
  onFavors=()=>{},
}) => {
  const favors = list.favors == undefined ? '': list.favors
  const id = list.id

  // console.log('list.applications', JSON.stringify(list.application));
  return(
    <div className={styles.foot}>
      <div className={styles.btnContainer}>
        <div className={styles.collection} onClick={onCollection}>
        <img onClick={()=>onFavors(id,favors)} src={favors==0?no_collectionIcon:collectionIcon}/>
          {/*favors==0?(<img src={no_collectionIcon}/>):(<img src={collectionIcon}/>)*/}
        </div>
        <div className={styles.btnItem}>
          <div className={styles.consultation} onClick={onConsultation}>
            <img src={consultationIcon}/>
            <span>咨询</span>
          </div>
          {list.application == 0 ?(
            <div className={styles.signUp} onClick={onSignUp}>
              <img src={signUpIcon}/>
              <span>报名</span>
            </div>
          ):(
            <div className={styles.signedUp}>
              {/* <img src={signUpIcon}/> */}
              <span>已报名</span>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

export default footBtn;
